<template>
	<div class="header" :class="[showHeader]">
		<div class="header-back" :class="[showBack]">
			<span class="iconfont">&#xe641;</span>
		</div>
		<div class="header-search" :class="[showSearch]">
			<span class="iconfont">&#xe627;</span>
			上海海昌海洋公园
		</div>
		<router-link to="/location">
			<div class="header-city" :class="[showCity]">
				{{this.$store.state.city}}
				<span class="iconfont">&#xe613;</span>
			</div>
		</router-link>
	</div>
</template>

<script>
export default {
  name: 'homeHeader',
  props:["city"],
  data(){
	  return{
		  showHeader: 'showHeader',
		  showBack: 'showBack',
		  showSearch: 'showSearch',
		  showCity: 'showCity'
	  }
  },
  methods:{
	  scrollChange(){
		  let scrollLenght = document.documentElement.scrollTop
		  if(scrollLenght > 10){
			  this.showHeader = 'showHeader'
			  this.showBack = 'showBack'
			  this.showSearch = 'showSearch'
			  this.showCity = 'showCity'
		  }
		  else{
			  this.showHeader = ''
			  this.showBack = ''
			  this.showSearch = ''
			  this.showCity = ''
		  }
	  }
  },
  mounted() {
  	window.addEventListener('scroll',this.scrollChange)
  }
  
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.showHeader
	background: #FFFFFF
.header
	color:#000
	line-height:.88rem
	text-align:center
	display:flex
	.header-back
		float:left
		width:.9rem
	.showBack
		color: #000000
	.header-search
		flex:1
		height:.5rem
		line-height:.5rem
		margin-top:.2rem
		margin-left:.2rem
		margin-right:.2rem
		border-radius:.5rem
		box-shadow:0 0 .01rem .02rem #ccc
	.showSearch
		background: #eaedf2
		color: #96979d 
	.header-city
		float:right
		width:1.4rem
	.showCity
		color:#949294
	.showCity>span
		color: #cecdce 
</style>
